React Profiler API
from ReactNativeのパフォーマンス
React本家のパフォーマンス計測のためのツール
<Profiler>でwrapした内部のコンポーネント群のRendering時間を計測
<Profiler>はネストもできる
実機で使用できる
メモ化すべき箇所の指摘
Productionには残さないほうが良い
遅くなる
docs
props
id
onRender
id
Profilerのidの名前
phase: "mount" | "update"
初回mountなのか、再描画なのかを示す
actualDuration
今回の更新でProfilerとその子孫の描画に要した時間
memo化の指標になる
理想的にはupdateのときは、mountに比べてかなり小さくなるべき
子孫要素は特定のpropsが変化したときのみ再描画されるべきなのでmrsekut.icon
baseDuration
一切のmemo化なしで描画した場合の最悪の時間を推定して表示
これとactualDurationの差を見るのかmrsekut.icon
startTime
Reachが更新の描画を開始したタイムスタンプ
commitTime
Reactが更新をコミットした時刻
描画終了のタイムスタンプ
interaction
更新がスケジュールされた(render や setState の呼び出しなどにより)際に trace された “interaction” の Set
よくわからんmrsekut.icon
例
code:ts
import React, { useEffect, Profiler, ProfilerOnRenderCallback } from 'react';
const callback: ProfilerOnRenderCallback = (
id,
phase,
actualTime,
baseTime,
startTime,
commitTime
) => {
console.log(`${id}'s ${phase} phase=====
Actual time : ${actualTime}
Base time : ${baseTime}
Start time : ${startTime}
Commit time : ${commitTime}
`);
};
const App: React.FC = () => {
return (
<App>
<Profiler id='Navigation' onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
};
お気持ち
Rootに近い場所でProfiler仕込んでもあまり参考にならないmrsekut.icon
「これとこれの数値の差があるべき」というが、差がありすぎるので参考にならない
ActualとBaseが5000倍ぐらい違う
もう少し細かい単位で仕込むと良さそう
#??
どうやって本番環境で使う?
Firebase Performance Monitoringと組み合わせるの?
これらの数値をどう見ればいい?
具体的にどの数値に着目し、どこから改善スべきなのかがわからない
例えば
AとBの差が開いているのは良くない
Aは100以下じゃないと良くない
など
計測できるのは、mountとupdateのみであって、ユーザーのインタラクションなどは無理?
ex. 「いいね」した
参考
Performance Tracking in React Native | by Lukas Kurucz | ITNEXT
https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
https://gist.github.com/bvaughn/60a883af01716a03a1b3285a1029be0c
https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16